<template>
	<view class="container">
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" paddingItem="0 80rpx" activeColor="#FF0000" line-height="5rpx" lineColor="#FF0000">
		</v-tabs>
		<view v-if="list.length > 0">
		<!--滚动区域-->
		<scroll-view scroll-y = "true" style="height: 500rpx;">
			<view class="coupon-list">
				<view class="coupon-item" v-for="(item,i) in list" :key="item.id">
					<view class="item-wrapper">
						<view class="coupon-type"> {{item.coupon_type.text}}</view>
						<view class="tip">
							<view v-if="item.coupon_type.value == 10">
								<text style="font-size: 30rpx;">￥</text>
								<text class="money">{{item.reduce_price}}</text>
							</view>
							<view v-else>
								<text class="money">{{item.discount}}折</text>
							</view>
							<text class="pay-line">满{{item.min_price}}元可用</text>
						</view>
						<view class="splite-line"></view>
						<view class="item-wrapper-content">
							<view class="title">{{item.name}}</view>
							<view class="bottom">
							    <view class="time">
									<text style="font-size: 24rpx;">{{ item.start_time }}~{{ item.end_time }}</text>
							     </view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		</view>
		<view v-else>
			<view class="content">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无优惠券哦</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabs: ['未使用', '已使用','已过期'],
				list:[
					{id:9,reduce_price:20.00,min_price:120.00,name:'120减20',discount:0,coupon_type:{text:'满减卷',value:10},start_time:'2020-10-01',end_time:'2020-11-31'},
					{id:10,reduce_price:10.00,min_price:100.00,name:'100减10',discount:0,coupon_type:{text:'满减卷',value:10},start_time:'2020-10-01',end_time:'2020-11-31'}
				]
			};
		},
		
		methods:{
			changeTab(index){
				console.log(index);
			}
		}
	}
</script>

<style lang="scss">
	@import url("/static/css/iconfont.css");
.container{
	background-color: #F7F7F7;
	height: 100vh;
	
	.content{
		padding: 250rpx 100rpx;
		box-sizing: border-box;
		.iconfont{
			font-size: 150rpx;
			color: #ccc;
			text-align: center;
			display: block;
			margin-bottom: 12rpx;
		}
		.cont{
			display: block;
			text-align: center;
			font-size: 30rpx;
			color: #999;
		}
	}
	
	.coupon-list{
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		
		.coupon-item {
		    position: relative;
		    overflow: hidden; //隐藏多余部分
		    margin-bottom: 22rpx; 
		}
		.item-wrapper {
		    width: 100%;
		    display: flex;
		    background: #fff;
		    border-radius: 8rpx;
		    color: #fff;
		    height: 180rpx; 
			background: linear-gradient(-141deg, #f7d059, #fdb054); 
			.coupon-type{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				width: 128rpx;
				padding: 3px 0;
				background: #A771FF;
				font-size: 20rpx;
				text-align: center;
				color: #FFFFFF;
				transform: rotate(45deg);
				transform-origin: 64rpx 64rpx;
			}
			
			.tip{
				position: relative;
				flex: 0 0 32%;
				text-align: center;
				border-radius: 0 8px 8px 0;
				flex-direction: column;
				justify-content: center;
				display: flex;
				.money{
					font-weight: bold;
					font-size: 52rpx;
				}
				
				.pay-line{
					font-size: 22rpx;
				}
			}
			
			.splite-line{
			    position: relative;
			    flex: 0 0 0;
			    border-left: 4rpx solid #fff;
			    margin: 0 5px 0 3px;
			    background: #fff; 
			}
			.splite-line:before{
				content: '';
				position: absolute;
				width: 12px;
				height: 6px;
				background: #f7f7f7;
				left: -7px;
				z-index: 1;
				border-radius: 0 0 8px 8px;
				top: 0;
			}
			
			.splite-line:after {
				content: '';
				position: absolute;
				width: 12px;
				height: 6px;
				background: #f7f7f7;
				left: -7px;
				z-index: 1;
				border-radius: 8px 8px 0 0;
			    bottom: 0;
			}
			.item-wrapper-content{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				padding: 30rpx 20rpx;
				border-radius: 8px 0 0 8px;
				
				.title{
					font-size: 38rpx;
				}
				
				.bottom{
					display: flex;
					align-items: center;
					.time{
						  flex: 1;
					}
				}
			}
		}
	}
}
</style>
